<div class='col-xs-12 position-r p-l-zero p-r-zero'>
    <div class="col-xs-12 text-center text-primary m-t-xs p-l-zero p-r-zero">
        <h3 class="m-t-zero">{$month|default=''}月-月度统计</h3>
        <h2>
            <span style="font-size: 18px;">完成</span>
            {$month_total|default=0}
            <span style="font-size: 18px;position: relative;bottom: 15%">次</span>
        </h2>
        <h4>
            {egt name="$month_total" value="$last_month_total"}
            <i class="glyphicon glyphicon-arrow-up color-red"></i>
            {else/}
            <i class="glyphicon glyphicon-arrow-down color-green"></i>
            {/egt}
            {$month_total-$last_month_total}
            <span style="font-size: 18px;position: relative;bottom: 15%">次</span>
           
        </h4>
    </div>    
    <div class="col-xs-12 p-l-zero p-r-zero" id="month_chart" style="height: 26rem"></div>    
    <div class="col-xs-12 p-l-zero p-r-zero" id="month_type_chart" style="height: 26rem"></div>    
</div>
<script>
$(function($) {
         var chart = Highcharts.chart('month_type_chart', {
                    credits: {
                             enabled: false // 禁用版权信息
                   },
                  chart: {
                             plotBackgroundColor: null,
                             plotBorderWidth: null,
                             plotShadow: false
                  },
                  title: {
                             text: ''
                  },
                  tooltip: {
                             headerFormat: '{series.name}<br>',
                             pointFormat: '{point.name}({point.y}): <b>{point.percentage:.1f}%</b>'
                  },
	plotOptions: {
                             pie: {
                             }
	},
                   legend: {
                             layout: 'vertical',
                             align: 'left',
                             x: -10,
                             verticalAlign: 'top',
                             y: -10,
                             floating: true,
                             labelFormatter: function () {
                                       return this.name + " ("+this.y+"):  "+this.percentage.toFixed(2)+"%";
                             }
                   },
                   plotOptions: {
                             pie: {
                                       allowPointSelect: true,
                                       cursor: 'pointer',
                                       colors:{$type_map_color|json_encode|raw},
                                       dataLabels: {
                                       enabled: false,
                                                format: '{name} ({y})'
                                       },
                             showInLegend: true
                            }
                   },
	series: [{
                             type: 'pie',
                             name: '类型',
                             data: {$month_type_stats|to_pie|json_encode|raw}
	}]
        });

    
    var chart1 = $('#month_chart').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false // 禁用版权信息
        },
        title: {
            text: ''
        },
        // xAxis:[],
        xAxis: {
            categories: {$month_stats|array_keys|json_encode|raw},
        },
        yAxis: [{ // Primary yAxis
            title: {
                text: ' ',
            }
        },
        { // Secondary yAxis
            title: {
                text: ' ',
            },
            labels: {
                format: '{value}%',
            },
            opposite: true
        }],
        tooltip: {
            shared: true

        },
        plotOptions: {
            column: {}
        },
        subtitle: {
            //            text: '数据截止：昨天',
            align: 'right',
            x: -10
        },
        series: [{
            name: '完成数',
            data: {$month_stats|array_values|json_encode},
        },
        ]

    });
    });
</script>